チュートリアル 1
◆基本の 10 ステップ
Step 1. 実行している Siv3D アプリの終了方法
実行している Siv3D アプリは、Esc キーを押すか、ウィンドウの閉じるボタンを押すと終了します
プログラムを実行したまま、再度コードをビルドすると、実行ファイルを上書きできずエラーになります
Step 2. 最初に用意されているプログラムを改造する
▼最初のプログラム
code:Main.cpp
# include <Siv3D.hpp>
void Main()
{
Graphics::SetBackground(ColorF(0.8, 0.9, 1.0));
const Font font(50);
const Texture textureCat(Emoji(U"🐈"), TextureDesc::Mipped);
while (System::Update())
{
font(U"Hello, Siv3D!🐣").drawAt(Window::Center(), Palette::Black);
font(Cursor::Pos()).draw(20, 400, ColorF(0.6));
textureCat.resized(80).draw(540, 380);
Circle(Cursor::Pos(), 60).draw(ColorF(1, 0, 0, 0.5));
}
}
数字やダブルクォーテーション " " の中の文字を変えるとどうなるか試してみましょう
// Graphics::SetBackground(ColorF(0.8, 0.9, 1.0)); のように、行頭に // をつけるとコメントになります
コメントにすると、その部分はプログラムとしてのはたらきは無くなり、単なるメモと同じ扱いになります
Step 3. 複雑なサンプルをコピペで動かしてみる
サンプル集 のプログラムをコピペして実行してみましょう Step 4. 最小の Siv3D コード
ウィンドウは表示されず、すぐに終了するプログラムです
code:cpp
# include <Siv3D.hpp>
void Main()
{
}
Step 5. メインループ
while (System::Update()) は、ウィンドウが閉じられるか、Esc キーがおされるまでループし続けます(メインループ)
メインループが続いてる間、ウィンドウが表示されて画面が更新されます
メインループは、使用しているモニターのリフレッシュレートと同じ速度で繰り返されます(通常 60, 120, または 144 FPS)
FPS: frames per second = 1 秒間に画面が何回更新されるかを表す値
https://gyazo.com/492ae712c4c79aa5be5f8d037a7ef3ff
code:cpp
# include <Siv3D.hpp>
void Main()
{
while (System::Update())
{
}
}
Step 6. アプリケーションのウィンドウに情報を表示する
Print << はテキストや数値をアプリケーションのウィンドウに出力します
Siv3D で扱う文字や文字列は UTF-32 なので、文字や文字列リテラルの前には U プレフィックスを付けます
https://gyazo.com/0b40e4a9e4b038f85d4a088e57e74e68
code:cpp
# include <Siv3D.hpp>
void Main()
{
Print << U"Hello, Siv3D!";
Print << U"1 + 1 = " << (1 + 1);
Print << Vec2(12.3, 45.6);
Print << Rect(100, 200, 500, 300);
Print << DateTime::Now();
Print << Range(1, 10);
while (System::Update())
{
}
}
Step 7. 2D 座標系
ウィンドウ内の黒い部分が画面(クライアント領域)です
Siv3D ではクライアント領域に図形やテクスチャを表示できます
クライアント領域上の位置を表す 座標系 は、右方向が +X , 下方向が +Y です
特に指定しない限り、クライアント領域の大きさは 幅 640 ピクセル, 高さ 480 ピクセル です
したがって、一番左上の座標は (0,0)、右下の座標は (639,479) になります
ClearPrint() は Print したものを消去します
Cursor::Pos() は現在のマウスカーソルの座標を返します
https://gyazo.com/ab975cd31d7cb4bd46405114f9c00d3b
code:cpp
# include <Siv3D.hpp>
void Main()
{
while (System::Update())
{
ClearPrint();
Print << Cursor::Pos();
}
}
Step 8. 円を動かす
一度描いたものは次のフレームでは消えます(Print は例外)
次のようなコードで、マウスカーソルに追随する円を描きます
https://gyazo.com/e9373118565306093958dc720a74c2c0
code:cpp
# include <Siv3D.hpp>
void Main()
{
while (System::Update())
{
Circle(Cursor::Pos(), 80).draw();
}
}
Step 9. 背景の色を設定する
Graphics::SetBackground() で背景の色を変更できます
背景の色は、1 度変えると、もう 1 度変えるまでそのままです
色は Palette や ColorF, Color, HSV で表します
Palette の場合 Palette::色名
ColorF の場合 ColorF(r, g, b) で各要素の範囲は 0.0 ~ 1.0
Color の場合 Color(r, g, b) で各要素の範囲は 0 ~ 255
HSV の場合 HSV(h, s, v)
h は 0.0~360.0 もしくはそれ以外の値で色相を表す
s は 0.0~1.0 で彩度を表す
v は 0.0~1.0 で明度を表す
https://gyazo.com/b30a8bc4c7582e0a99b66d1f7960e078
code:cpp
# include <Siv3D.hpp>
void Main()
{
// 背景色を Skyblue に設定
Graphics::SetBackground(Palette::Skyblue);
while (System::Update())
{
}
}
https://gyazo.com/7222c3696266e7e7c28d4dd6114faefd
code:cpp
# include <Siv3D.hpp>
void Main()
{
// 背景色を ColorF(1.0, 0.5, 0.1) に設定
Graphics::SetBackground(ColorF(1.0, 0.5, 0.1));
while (System::Update())
{
}
}
Step 10. 図形を描く
図形を作成して .draw() で描きます
円は Circle
長方形は Rect
線分は Line
色は Palette や ColorF, Color, HSV で表します
https://gyazo.com/7dee40835827da7e040ef43cfaf8cde3
code:cpp
# include <Siv3D.hpp>
void Main()
{
while (System::Update())
{
// 赤い円を描く
Circle(100, 100, 100).draw(Palette::Red);
// オレンジの長方形を描く
Rect(150, 100, 200, 200).draw(Palette::Orange);
// ColorF(0.5, 1, 1) 太さ 3 の線分を描く
Line(50, 400, 600, 50).draw(3, ColorF(0.5, 1.0, 1.0));
// ColorF(0, 0, 1) 不透明度 0.5 の円を描く
Circle(400, 400, 200).draw(ColorF(0.0, 0.0, 1.0, 0.5));
}
}